<template>
    <div>
        <div class="carousel" v-if="bannerList[0]">
            <el-carousel :interval="4000" type="card" height="250px">
                <el-carousel-item v-for="(item, index) in bannerList" :key="index">
                    <img :src="item.imageUrl" style="height:100%">
                </el-carousel-item>
            </el-carousel>
        </div>
        <h3>推荐歌单<i class="iconfont icon-youjiantou"></i></h3>
<ListCard :listCardItem=musicList @clickListCardItem = "clickListCardItem"></ListCard>
    </div>
</template>

<script setup>
import request from '../../api/index'
import ListCard from '../../components/ListCard.vue';
import { ref, reactive, onMounted,onBeforeMount} from 'vue'
import {useRouter} from 'vue-router'
const router = useRouter()

onBeforeMount(() => {
    getBanner()
    getMusicList()
    
})
// banner数据
const bannerList = ref([])
// 推荐歌单数据
let musicList = ref([])
// 获取banner
const getBanner = async () => {
    let res = await request('/banner')
    if (res.data.code === 200) {
        bannerList.value = res.data.banners
    }

}
// 获取10条推荐歌单
const getMusicList = async () => {
    let res = await request('/personalized', { limit: 10 })
    if (res.data.code === 200) {
        musicList.value = res.data.result
    }
}

// 点击歌单封面回调
const clickListCardItem = (id) => {
   router.push({name:'musicListDetail',params:{id:id}})
}
</script>

<style lang="scss" scoped>
.el-carousel__item {
    border-radius: 20px;
    overflow: hidden;
    img{

    }
}

.carousel {
    margin: 0 auto;
    width: 1200px;
    position: relative;
    z-index: 10;
}
</style>